<template>
	<view>
		<view v-if="house" class="house-item" >
			<view class="item-face">
				<navigator :url="show_url">
				<up-image :src="house.thumb" width="130" height="100" radius="8">
					<template #error>
						 <up-image :src="ee.wxapp.photoface" width="130"
						 height="100" radius="8" ></up-image>						 
					</template> 
					
				</up-image>
				</navigator>
				 
			</view>
			<view class="item-content">
				<view class="item-title">
					<navigator :url="show_url">
					<up-text lines="2"  size="17" :text="house.name" :block="true"></up-text>
					</navigator>
					
					<view class="item-action">
						<navigator :url="show_url">
						<u-text color="#007AFF" lines="1" iconStyle="color:#007AFF" suffixIcon="arrow-right" text="小区详情"></u-text>
					</navigator>
					</view>
				</view>

				<view class="lines">
					 
					<view class="item-desc">
						<text>{{house.area}}</text>
					</view>
				</view>	
				<view class="lines">
					<view class="item-price">
					  <text class="total">{{house.item_per}}</text>
					 </view>
				</view>				 
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name: "kb-village-item",
		props: {
			house: {
				type: Object,
				validator: function(value) {
					// 返回true或false，表示value是否符合要求
					return value !== null && typeof value === 'object';
				}
			},
			renttype : {
				type:[String, Number],
				default: 0,
			},
			zhutype: {
				type:[String, Number],
				default: 0,
			}
		},
		data() {
			return {
			   view_history_tips: '',
			};
		},
		computed: {
			//房源链接url
			show_url(){
				return '/pages/show/village?id='+ this.house?.id +'&zhutype='+this.zhutype
			},
			 
		},
		methods:{
			onClick (e){
				 this.history_tips = true;	
			}
		},

		watch: { 
			 history_tips(n,o){ //定义这里后可以运行history_tips 它的get 方法
				 
			 }
		},
		mounted() {
			 
		}
	}
</script>

<style lang="scss">
	/**/
	.house-item {
		display: flex;
		padding: 20px 20px;
		// border-bottom: 1rpx solid #dadada;
		background: #fff; 
	}
	.hasview{
		font-size: 20rpx;
		color: #454545;
		padding-top: 13rpx;
	}

	.item-content {
		margin-left: 24rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.item-title {
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.item-price .total {
		color: #f80000;
		font-weight: bold;
		font-size: 18px;
	}

	.item-price .per {
		margin-left: 20rpx;
		color: #222;
		font-size: 12px;
	}

	.lines {
		display: flex;
		flex-direction: column;
		line-height: 40rpx;
		margin: 10rpx 0rpx;
	}

	.item-desc {
		color: #999;
		font-size: 28rpx;
	}
 
 .item-action{
	 
 }
</style>